<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./js/bootstrap.min.css" />
		<script src="./js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.top-side {
				width: calc(100% - 40px);
				margin-left: 40px;
				display: inline-flex;
				justify-content: space-between;
			}

			.left-side {
				height: 160px;
				width: 40px;
				float: left;
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				justify-content: space-around;
				align-items: center;
			}

			.right-side {
				width: calc(100% - 40px);
				height: 160px;
				float: left;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				flex-wrap: wrap;
			}

			.day {
				display: block;
				width: 16px;
				height: 16px;
				background-color: #EEEEEE;
				margin-top: 3px;
				margin-bottom: 3px;
			}
		</style>
	</head>
	<body>
		<div class="container" id="app">
			<div class="top-side">
				<span class="month" v-for="m in month">{{ m }}</span>
			</div>
			<div class="left-side">
				<span>周一</span>
				<span>周四</span>
				<span>周日</span>
			</div>
			<div class="right-side">
				<div class="day" v-for="d in days">{{ d }}</div>
			</div>
		</div>
		<script>
			new Vue({
				el: '#app',
				data: {
					month: ['五月', '六月', '七月', '八月', '九月', '十月', '十月', '十二月', '一月', '二月', '三月', '四月'],
					days: []
				},
				mounted() {
					for (let i = 0; i < 365; i++) {
						this.$data.days.push(i);
					}
				}
			})
		</script>
	</body>
</html>
